<template>
  <yd-ls-box>
    <yd-ls-layout title="评价" :onfoot=false :tolfurl="urls" style="background-color: rgb(255,255,255)">
      <div class="yd-ls-height"></div>
      <div class="yd-ls-eval">
        <div class="yd-ls-eval-img">
          <img :src="evalBase.head || defalut_img" alt="" />
        </div>
        <p>{{ evalBase.doctor_name }}</p>
        <p>{{ evalBase.cust_name }} <i v-if="evalBase.title">|</i> {{ evalBase.title }}</p>
      </div>

      <div class="yd-ls-eval-box">
        <h3><span>评 分</span></h3>
        <yd-rate  v-model="rate" :readonly="hasRate"></yd-rate>
        <div class="yd-ls-eval-txt" v-if="!rate">
          <p>满意请给医生五星哦</p>
          <p>你的反馈是对医生的肯定以及改进的动力</p>
        </div>
        <div class="yd-ls-eval-effice">
          <p v-html="ratetxt"></p>
          <p v-if="!hasSuggest">{{ evalBase.remark || suggest }}</p>
          <p v-if="hasSuggest">
            <textarea placeholder="其他意见和建议" v-model="suggest" maxlength="100"></textarea>
          </p>
        </div>
      </div>
      <div class="yd-ls-eval-good" @click="goGood()">
        <div class="yd-ls-eval-good-tips">
          您满意的话可以试试赞赏医生哦。
          <div class="yd-accordion-head yd-ls-eval-good-rotated"><i class="yd-accordion-rotated"></i></div>
        </div>
        <span><yd-icon color="#6284f2" name="good"></yd-icon></span>
        <h3>点赞</h3>
      </div>
      <button
        v-if="!showBtn" @click="evalSave"
        class="yd-btn-block yd-btn-blue"
        style="width: 60%; margin: 0 20%; margin-top: 30px; border-radius: 25px;">
        提交评价
      </button>
      <div class="yd-ls-height"></div>
    </yd-ls-layout>
    
    <!-- <yd-ls-button btnname="提交评价" v-if="!showBtn" @handle-button="evalSave"></yd-ls-button> -->
  </yd-ls-box>
</template>

<style>
.yd-ls-eval-good {
  text-align: center;
  position: relative;
  margin-top: 1rem;
  width: 1rem;
  margin-left: -.5rem;
  left: 50%;

}
.yd-ls-eval-good h3 {
  font-size: .3rem;
  color: deeppink;
} 
.yd-ls-eval-good span {
  display: inline-block;
}
.yd-ls-eval-good-tips {
  color: deeppink;
  border: 1px solid #a0a0a0;
  border-radius: 5px;
  width: 4rem;
  font-size: .24rem;
  padding: 5px 0;
  position: absolute;
  top: -.7rem;
  right: 0;
}
.yd-ls-eval-good-rotated {
  position: absolute;
  bottom: -8px;
  right: .34rem;
  padding: 0;
}
.yd-ls-eval-good-rotated .yd-accordion-head:after {
  border-bottom: 0;
}
.yd-ls-eval {
  width: 100%;
  overflow: hidden;
  text-align: center;
  padding: 0.2rem;
  background-color: rgb(72, 112, 243);
}
.yd-ls-eval .yd-ls-eval-img {
  display: inline-block;
  width: 1.14rem;
  height: 1.14rem;
  overflow: hidden;
  border-radius: 50%;
}
.yd-ls-eval .yd-ls-eval-img img {
  width: 100%;
  height: 100%;
}
.yd-ls-eval p {
  margin-top: 0.1rem;
  font-size: 0.28rem;
  line-height: 0.64rem;
  color: #fff;
}

.yd-ls-eval-box {
  position: relative;
  margin-top: 0.8rem;
}
.yd-ls-eval-box h3 {
  position: relative;
  margin-bottom: 0.8rem;
}
.yd-ls-eval-box h3 span {
  font-style: normal;
  font-weight: 500;
  color: #ccc;
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -0.5rem;
  margin-left: -0.5rem;
  z-index: 10;
  width: 1rem;
  height: 1rem;
  line-height: 1rem;
  text-align: center;
  background-color: #fff;
}
.yd-ls-eval-box h3:after {
  display: block;
  position: relative;
  width: 80%;
  content: "";
  margin: 0 auto;
  border-bottom: 1px solid #d9d9d9;
}

.yd-ls-eval-box .yd-rate {
  justify-content: center;
}
.yd-ls-eval-txt,
.yd-ls-eval-effice {
  margin-top: 0.4rem;
}
.yd-ls-eval-txt p {
  text-align: center;
  line-height: 0.5rem;
}
.yd-ls-eval-txt p:nth-child(1) {
  color: #6284f2;
}
.yd-ls-eval-txt p:nth-child(2) {
  color: #ccc;
}

.yd-ls-eval-effice p {
  text-align: center;
  padding-bottom: 0.2rem;
  width: 80%;
  margin: 0 auto;
  color: #999;
  line-height: 0.5rem;
}
.yd-ls-eval-effice p textarea {
  border: 1px solid #d9d9d9;
  width: 60%;
  height: 1.5rem;
  font-size: 0.3rem;
  outline: none;
  border-radius: 0;
  -webkit-appearance: none;
  -moz-appearance: none;
  overflow: auto;
  resize: none;
  font: 100% tahoma, \5b8b\4f53, arial;
}
</style>
<script>
import ydLsBox from "../../../components/yd-ls-box.vue";
import ydLsLayout from "../../../components/yd-ls-layout.vue";
import ydLsContent from "../../../components/yd-ls-content.vue";
import ydLsButton from "../../../components/yd-ls-button.vue";
import api from "../../../axios/api";

export default {
  name: "eval",
  data() {
    return {
      urls: "",
      showBtn: false,
      contents: [],
      rate: 0,
      ratetxt: "",
      hasRate: false,
      suggest: "",
      hasSuggest: false,
      evalBase: {},
      baseParams: {
        pkid: '',
        drid: '',
        rid: '',
        msgid: '',
        drname: '',
        pagename: '',
        type: ''
      },
      defalut_img: api.default_img_dot // 医生缺省头像
    };
  },
  created() {
    //TODO: 从公众号进时，检查openid
    if (this.$route.query.openid) {
      localStorage.openId = this.$route.query.openid;
    }

    //TODO:初始化数据
    this.baseParams.drid = this.$route.query.drid;
    this.baseParams.rid = this.$route.query.rid;
    this.baseParams.msgid = this.$route.query.msgid || '';
    this.baseParams.drname = this.$route.query.drname || '';
    this.baseParams.type = this.$route.query.type;
    this.baseParams.pagename = this.$route.query.pagename || '';
    if (this.baseParams.pagename == "msg") {
      this.urls = `index.html#/message?type=home&drid=${this.baseParams.drid}&msgid=${this.baseParams.mid}&drname=${this.baseParams.drname}`;
    } else if (this.baseParams.pagename == "home") {
      this.urls = "index.html#/home";
    } else {
      this.urls = "subscribedetail.html#/";
    }
    this.getEval(this.baseParams.drid, this.baseParams.rid, this.baseParams.type);
  },
  methods: {
    init() {
      //TODO:初始化数据
    },
    getEval(drid, rid, type) {
      this.$dialog.loading.open(api.default_loading_txt);
      this.axios
        .get(api.subscribe_evals_base, {
          params: {
            drid: drid,
            record_type: type,
            record_id: rid
          }
        })
        .then(m => {
          let subscribe_evals_base_data = m.data;
          this.$dialog.loading.close();
          this.evalBase = subscribe_evals_base_data.data;
          this.baseParams.pkid = this.evalBase.pkid;
          this.rate = this.evalBase.score;
          if (this.rate != 0) {
            this.showBtn = true;
            this.hasSuggest = false;
            this.hasRate = true;
          }
        })
        .catch(err => {
          this.$dialog.loading.close();
          this.$dialog.alert({ mes: JSON.stringify(err) });
        });
    },
    evalSave() {
      if (!!!this.rate) {
        this.notify("请先选择评分！");
        return;
      }
      let params = {
        drid: this.$route.query.drid,
        score: this.rate,
        remark: this.suggest,
        record_id: this.$route.query.rid,
        record_type: this.$route.query.type
      };
      this.$dialog.loading.open(api.default_loading_txt);
      this.axios
        .post(api.subscribe_evals_save, params)
        .then(m => {
          this.showBtn = true;
          this.hasSuggest = false;
          this.hasRate = true;
          this.baseParams.pkid = m.data.data;
          this.$dialog.loading.close();
        })
        .catch(err => {
          this.$dialog.loading.close();
          this.$dialog.alert({ mes: JSON.stringify(err) });
        });
    },
    goGood() {
      this.$router.push({path: '/evaldetail', query: this.baseParams})
    },
    notify(info) {
      this.$dialog.notify({
        mes: info,
        timeout: 1500
      });
    }
  },
  mounted() {
    this.init();
  },
  watch: {
    rate(newval) {
      if (this.hasRate) {
        this.hasSuggest = false;
      } else {
        this.hasSuggest = true;
      }
      if (newval * 1 > 0) {
        //TODO：评价标准
        switch (newval * 1) {
          case 1:
            this.ratetxt = '<span style="color:red;">很差</span>';
            break;
          case 2:
            this.ratetxt = '<span style="color:blue;">勉强</span>';
            break;
          case 3:
            this.ratetxt = '<span style="color:green;">一般</span>';
            break;
          case 4:
            this.ratetxt = '<span style="color:black;">挺好</span>';
            break;
          case 5:
            this.ratetxt = '<span style="color:darkgoldenrod;">非常好</span>';
            break;
        }
      }
    }
  },
  components: { ydLsBox, ydLsLayout, ydLsContent, ydLsButton }
};
</script>
